<template>
	<view style="display: flex; flex-direction: column; height: 100vh;">
		<!-- 固定在顶部的区域 -->
		<view style="width: 100%; height: 421rpx; flex-shrink: 0;">
			<view class="detail">
				<view v-if="currentIndex == 0">
					<!-- <web-view :src="detaili.panoramaFile"></web-view> -->
					<web-view v-if="showWebView && detaili.panoramaFile" :src="detaili.panoramaFile"
						style="width: 100%; height: 100%"></web-view>
				</view>
				<view v-if="currentIndex == 1">
					<swiper style="width: 100%; height: 400rpx;" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration">
						<swiper-item v-for="item in buildImg" style="width: 100%; height: 400rpx;">
							<image mode="aspectFill" :src="item" style="width: 100%; height: 400rpx;"></image>
						</swiper-item>
					</swiper>
				</view>
				<view v-if="currentIndex == 2 && detaili.buildVideo">
					<video :src="detaili.buildVideo" style="width: 100%; height: 400rpx;"></video>
				</view>
				<view style="width: 90%; height: 40rpx; position: absolute; z-index: 99; bottom: 23rpx;  margin-left: 6%;">
					<view v-if="detaili.panoramaFile || detaili.buildVideo" class="tabquanjing">
						<view v-if="detaili.panoramaFile" class="tablist" :class="[currentIndex == 0 ? 'active' : '']"
							@click="btnli(0)">
							<image v-if="currentIndex == 0" src="/static/detail/panorama-icon-active.png" class="tubiao"></image>
							<image v-else src="/static/detail/panorama-icon.png" class="tubiao"></image>
							<view>全景</view>
						</view>
						<view class="tablist" :class="[currentIndex == 1 ? 'active' : '']" @click="btnli(1)">
							<image v-if="currentIndex == 1" src="/static/detail/image-icon-active.png" class="tubiao">
							</image>
							<image v-else src="/static/detail/image-icon.png" class="tubiao"></image>
							<view>图片</view>
						</view>
						<view v-if="detaili.buildVideo" class="tablist" :class="[currentIndex == 2 ? 'active' : '']"
							@click="btnli(2)">
							<image v-if="currentIndex == 2" src="/static/detail/video-icon-active.png" class="tubiao">
							</image>
							<image v-else src="/static/detail/video-icon.png" class="tubiao"></image>
							<view>视频</view>
						</view>
					</view>
					<!-- <view class="tabye">
							1/{{buildImg.length}}
						</view> -->
				</view>
				<view class="detail_header">
					<view style="width: 90%; float: left; height: 40rpx; margin-top: 10px; margin-left: 5%;">
						<image src="/static/detail/返回@1x.png" style="width: 42rpx; height: 42rpx; position: absolute; left: 0;"
							@click="fanhui()">
						</image>
						<image src="/static/detail/容器@1x (1).png" style="width: 42rpx; height: 42rpx; position: absolute; right: 0;"
							@click="tishikuang()">
						</image>
					</view>
					<!-- <view style="width: 90%; float: left; height: 40rpx; position: absolute; bottom:20rpx;  margin-left: 5%;">
						<view class="tabquanjing">
							<view class="tablist" :class="[  currentIndex == 0 ? 'active' :'']" @click="btnli(0)">
								<image v-if=" currentIndex == 0" src="/static/detail/panorama-icon-active.png" class="tubiao"></image>
								<image v-else src="/static/detail/panorama-icon.png" class="tubiao"></image>
								<view>全景</view>
							</view>
							<view class="tablist" :class="[ currentIndex == 1 ? 'active' :'']" @click="btnli(1)">
								<image v-if=" currentIndex == 1" src="/static/detail/image-icon-active.png" class="tubiao"></image>
								<image v-else src="/static/detail/image-icon.png" class="tubiao"></image>
								<view>图片</view>
							</view>
							<view class="tablist" :class="[ currentIndex == 2 ? 'active' :'']" @click="btnli(2)">
								<image v-if=" currentIndex == 2" src="/static/detail/video-icon-active.png" class="tubiao"></image>
								<image v-else src="/static/detail/video-icon.png" class="tubiao"></image>
								<view>视频</view>
							</view>
						</view>
						<view class="tabye">
							1/{{buildImg.length}}
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 可滚动的内容区域 -->
		<scroll-view scroll-y="true"
			style="position: relative; z-index: 2; flex: 1; overflow-y: auto; padding-bottom: 140rpx; margin-top: -10rpx;">
			<view class="img_tab_xinxi">
				<view style="display: flex; flex-direction: column; gap: 12px; width: 95%; margin-left: 2.5%;">
					<view class="yunqititle">
						<view style="white-space: nowrap;">{{ detaili.buildName }}</view>
						<view style="display: flex; gap: 15rpx; flex-wrap: wrap;" v-if="detaili.industryTag">
							<view class="bjs" v-for="tag in detaili.industryTag.split(',')">
								<image src="/static/detail/矩形 465@1x.png" style="width: 30rpx; height: 30rpx;"></image>
								<view class="bt_bjs">{{ tag }}</view>
							</view>
						</view>
					</view>
					<view class="detail-tags" style="width: 100%;">
						<view class="beijinweizi" v-for="item in fenlist">{{ item }}</view>

					</view>
					<view style="width: 100%; display: flex; align-items: center; gap: 6rpx; overflow: hidden;">
						<view class="mianjibj">
							<view class="mjxx" v-if="Number(detaili.rentFeeStart) === 0 && Number(detaili.rentFeeEnd) === 0">面议</view>
							<view class="mjxx" v-else>
								<span style="font-weight: 700;">
									{{
										detaili.rentFeeStart === detaili.rentFeeEnd
											? detaili.rentFeeStart
											: `${detaili.rentFeeStart}-${detaili.rentFeeEnd}`
									}}
								</span>
								<span style="font-size: 20rpx;">/m²/月</span>
							</view>
							<view class="csjg">出租售价</view>
						</view>
						<view class="mianjibj">
							<view class="mjxx">
								<span style="font-weight: 700;">{{ detaili.vacancyArea }}</span>
								<span style="font-size: 20rpx;">m²</span>
							</view>
							<view class="csjg">空置面积</view>
						</view>
						<view class="mianjibj">
							<view class="mjxx">
								<span style="font-weight: 700;">35</span>
								<span style="font-size: 20rpx;">/m²/月</span>
							</view>
							<view class="csjg">物业费</view>
						</view>
					</view>
					<view class="guiyuanxinxi">
						<view class="mianjibj">
							<view class="mjxx" style="color: #000;">{{ detaili.street || '-' }}</view>
							<view class="csjg">所属街道</view>
						</view>
						<view style="width: 1px; height: 50rpx; margin-top: 25rpx; background-color: #D8D8D8;"></view>
						<view class="mianjibj">
							<view class="mjxx" style="color: #000;" v-if="detaili.mainUse == 1">办公</view>
							<view class="mjxx" style="color: #000;" v-else-if="detaili.mainUse == 2">创客空间</view>
							<view class="mjxx" style="color: #000;" v-else-if="detaili.mainUse == 3">厂房</view>
							<view class="mjxx" style="color: #000;" v-else-if="detaili.mainUse == 4">仓库</view>
							<view class="mjxx" style="color: #000;" v-else-if="detaili.mainUse == 5">商铺</view>
							<view class="mjxx" style="color: #000;" v-else-if="detaili.mainUse == 6">其他</view>
							<view class="mjxx" style="color: #000;" v-else-if="detaili.mainUse == 7">住宅</view>
							<view class="mjxx" style="color: #000;" v-else>办公</view>
							<view class="csjg">主要用途</view>
						</view>
						<view style="width: 1px; height: 50rpx; margin-top: 25rpx; background: #D8D8D8;"></view>
						<view class="mianjibj">
							<uni-tooltip placement="top">
								<view class="mjxx" style="color: #000; overflow: hidden;  width: 200rpx; white-space: nowrap;text-overflow: ellipsis;">
									{{ detaili.prName }}
								</view>
								<template #content>
									<view class="pr-name-bubble">{{ detaili.prName }}</view>
								</template>
							</uni-tooltip>
							<view class="csjg">物业单位</view>
						</view>
					</view>
					<view style="display: flex; align-items: center; gap: 15rpx; width: 100%;">
						<view style="display: flex; flex: 1; align-items: center; overflow: hidden;"
							@click="tiaozhuangaode(detaili.buildAddr)">
							<image src="/static/detail/dw.png" style="width: 20rpx; height: 24rpx;"></image>
							<view
								style="flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 24rpx; margin-left: 15rpx;">
								{{ detaili.buildAddr }}
							</view>
						</view>
						<image src="/static/detail/dt.png" style="width: 60rpx; height: 60rpx;  float: right;"></image>
					</view>
				</view>
			</view>
			<view class="jichuxinxi">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
					<view class="tab_kust_name">
						<view class="tab-bar">
							<view v-for="(item, index) in tabs" :key="index" class="tab-item"
								:class="{ active: currentIndexs === index }" @click="selectTab(index)">
								{{ item.name }}
								<view v-if="currentIndexs === index">
									<image src="/static/detail/dibu.png" style="width: 28rpx; height: 6rpx;"></image>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="jichuxinxis" v-if="currentIndexs == 0">
				<view>
					<view class="xiangqing">
						<view style="display: flex; flex-direction: column;">
							<view style="width: 100%; float: left;">
								<image src="/static/组 692@1x.png" class="tubiap_img_tler"></image>
								<view style="margin-left: -20rpx;float: left;">详情信息</view>
							</view>
							<view
								style="display: flex; flex-direction: column; row-gap: 5rpx; padding-left: 20rpx; padding-top: 15rpx; line-height: 1.6rem;">
								<view style="width: 100%;">
									<view class="jzmjk">建筑面积：</view>
									<view class="mjxx_b">{{ detaili.structureArea }}m²</view>
								</view>
								<view style="width: 100%; display: flex;">
									<view class="jzmjk">楼层层高： </view>
									<view class="mjxx_b" style="flex:1;">标准层{{ detaili.floorHeight }}m，净高3m</view>
								</view>
								<view style="width: 100%;">
									<view class="jzmjk">楼层信息：</view>
									<view class="mjxx_b">{{ detaili.haveFloor }}</view>
								</view>
								<view style="width: 100%;">
									<view class="jzmjk">物业类型：</view>
									<view class="mjxx_b">商业写字楼</view>
								</view>
								<view style="width: 100%;">
									<view class="jzmjk">租赁性质：</view>
									<view class="mjxx_b">出租和出售</view>
								</view>
								<view style="display: flex; width: 100%;">
									<view style="flex: 1;">
										<view class="jzmjk">项目竣工：</view>
										<view class="mjxx_b">{{ detaili.completionDate || '-' }}</view>
									</view>
									<view style="flex: 1;">
										<view class="jzmjk" style="margin-left: 20rpx;">楼层承重：</view>
										<view class="mjxx_b">{{ detaili.loadBearing }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="xiangqing">
						<view>
							<view style="width: 100%;">
								<image src="/static/组 692@1x.png" class="tubiap_img_tler"></image>
								<view style="margin-left: -20rpx; float: left; margin-bottom: 20rpx;">配套设施</view>
							</view>
							<view style="display: flex; width: 100%; margin-top: 26rpx;">
								<view style="display: flex; align-items: center; flex: 1; padding-left: 10rpx;">
									<image src="/static/容器@1x (6).png" style="width: 50rpx; height: 50rpx;"></image>
									<view style="margin-left: 20rpx;">
										<view style="font-size: 28rpx; font-weight: 500;">{{ detaili.parkingNum || '-' }}
										</view>
										<view style="font-size: 26rpx; color: #757575; margin-top: 5rpx;">停车位</view>
									</view>
								</view>
								<view style="display: flex; align-items: center; flex: 1; padding-left: 10rpx;">
									<image src="/static/容器@1x (7).png" style="width: 50rpx; height: 50rpx;"></image>
									<view style="margin-left: 20rpx;">
										<view style="font-size: 28rpx; font-weight: 500;">1个</view>
										<view style="font-size: 26rpx; color: #757575; margin-top: 5rpx;">食堂</view>
									</view>
								</view>
								<view style="display: flex; align-items: center; flex: 1; padding-left: 10rpx;">
									<image src="/static/容器@1x (8).png" style="width: 50rpx; height: 50rpx;"></image>
									<view style="margin-left: 20rpx;">
										<view style="font-size: 28rpx; font-weight: 500;">{{ detaili.elevatorNum || '-' }}
										</view>
										<view style="font-size: 26rpx; color:#757575; margin-top: 5rpx;">客梯</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="xiangqing">
						<view>
							<view style="width: 100%; float: left;">
								<image src="/static/组 692@1x.png" class="tubiap_img_tler"></image>
								<view style="margin-left: -20rpx; float: left; margin-bottom: 20rpx;">楼宇描述</view>
							</view>
							<view style="font-size: 28rpx; line-height: 1.6rem; text-indent: 2em; color: #5E5E5E;">
								{{ detaili.buildDes }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- ----------------- -->
			<view class="zupingxixi" style="padding-bottom: 20rpx; margin-top: 0;border-radius: 0 0 20rpx 20rpx;"
				v-if="currentIndexs == 1">
				<view style="margin-left: 5%; width: 90%; float: left;">
					<view style="margin-top: 20rpx;">
						<text style="color: #0766D9;">租赁</text>
						<text>信息</text>
						<text style="float: right; font-size: 24rpx;">空置面积: <text
								style="color: #1684FC; font-size: 26rpx; margin-left:10rpx;">{{ detaili.vacancyArea }}</text> m²</text>
					</view>
					<view class="list-container" style="margin-top: 20rpx;">
						<view class="list-item">
							<view class="custom-font">户型区间</view>
							<view class="custom-font">是否空置</view>
							<view class="custom-font">租售类型</view>
						</view>
						<view class="list-item" v-for="(item, index) in detaili.rooms"
							style="text-align: center; font-size: 24rpx;">
							<view style="width: 33%;">{{ item.areaScope }}</view>
							<view style="width: 33%;" v-if="item.flagVacant == true">是</view>
							<view style="width: 33%;" v-else>否</view>
							<view style="width: 33%;" v-if="detaili.rentType == 1">仅出租</view>
							<view style="width: 33%;" v-else-if="detaili.rentType == 2">仅出售</view>
							<view style="width: 33%;" v-else-if="detaili.rentType == 3">出租和出售</view>
							<view style="width: 33%;" v-else-if="detaili.rentType == 4">优先出租</view>
							<view style="width: 33%;" v-else-if="detaili.rentType == 5">优先出售</view>
							<view style="width: 33%;" v-else>--</view>
						</view>
					</view>
				</view>

			</view>
			<!-- ----------------- -->
			<view class="zupingxixi" style="margin-top: 0;border-radius: 0 0 20rpx 20rpx;" v-if="currentIndexs == 2">
				<view style="width: 100%; float: left; position: relative;">
					<view style="margin-top: 20rpx; margin-left: 5%; position: absolute; z-index: 2; ">
						<view>
							<text style="color: #0766D9;">特色</text>
							<text>园区</text>
						</view>
						<view style="display: flex; align-items: center; margin-left: 30px; margin-top: 20rpx;">

							<image src="/static/jmz.png" style="width: 200rpx;float: left;"
								v-if="detaili.propertyImg == null || detaili.propertyImg == ''"></image>
							<image :src="detaili.propertyImg" style="width: 200rpx;float: left;" v-else></image>
							<view v-if="industryTagfl && industryTagfl.length" style="float: left;font-size: 24rpx;">
								<view class="lyxx" v-for="item in industryTagfl">{{ item }}</view>
								<!-- <view class="lyxx" style="margin-top: 50rpx;">金融科技产业主题楼宇</view>
								<view class="lyxx" style="margin-top: 50rpx;">深圳颠覆性技术创新中心</view>
								<view class="lyxx" style="margin-top: 50rpx;">云启国际科技金融中心</view> -->
							</view>
							<view style="color: #fff; text-shadow: 0 0 4px rgba(0, 0, 0, 15%); margin-left: 100rpx;" v-else>
								暂无数据
							</view>
						</view>
						<view style="width: 100%; float: left;font-size: 28rpx;margin-top: 80rpx;">
							<text style="color: #0766D9;">龙头</text>
							<text>企业</text>
						</view>
						<view style="width: 95%; float: left;font-size: 28rpx; margin-top: 20rpx;" v-for="item in dasha">
							<view>
								<text>{{ item }}</text>
								<!-- <text style="float: right;"> > </text> -->
							</view>
						</view>

					</view>
					<image src="/static/detail/bja.png" style="width: 100%; height: 502rpx;"></image>
				</view>

			</view>
			<view class="zupingxixi" style="padding-bottom: 20rpx; margin-top: 0;border-radius: 0 0 20rpx 20rpx;"
				v-if="currentIndexs == 3">
				<view style="width: 100%; float: left; position: relative;">
					<view style="margin-top: 20rpx; margin-left: 5%; float: left; width: 100%;">
						<view>
							<text style="color: #0766D9;">综合</text>
							<text>服务</text>
						</view>

					</view>
					<view style="width: 100%; float: left; display: flex; justify-content: space-around; margin-top: 20rpx;">
						<view style="width: 25%; height: 100rpx;">
							<view style="width: 60rpx; height: 60rpx; margin: 0 auto;" @click="chuhia('/seaCentre/index')">
								<image src="/static/detail/出海中心@2x@1x.png" style="width: 100%; height: 100%;"></image>
							</view>

							<view class="custom-font" style="width: 100%; text-align: center;">出海中心</view>
						</view>
						<view style="width: 25%; height: 100rpx;"
							@click="chuhia('/pages/index/index?src=https%3A%2F%2Flhqf.szlh.org.cn%2Fmobile%2Fpages%2Fappeal%2Fadd')">
							<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
								<image src="/static/detail/提诉求 2@2x@1x.png" style="width: 100%; height: 100%;"></image>
							</view>

							<view class="custom-font" style="width: 100%; text-align: center;">提诉求</view>
						</view>
						<view style="width: 25%; height: 100rpx;"
							@click="chuhia('/pages/index/index?src=https%3A%2F%2Flhqf.szlh.org.cn%2Fmobile%2Fpages%2Findex%2Fzhengce')">
							<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
								<image src="/static/detail/享政策@2x@1x.png" style="width: 100%; height: 100%;"></image>
							</view>

							<view class="custom-font" style="width: 100%; text-align: center;">享政策</view>
						</view>
						<view style="width: 25%; height: 100rpx;"
							@click="chuhia('/pages/index/index?src=https%3A%2F%2Flhqf.szlh.org.cn%2Fmobile%2Fpages%2Factivity%2Findex')">
							<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
								<image src="/static/detail/聚活动 4@2x@1x.png" style="width: 100%; height: 100%;"></image>
							</view>

							<view class="custom-font" style="width: 100%; text-align: center;">聚活动</view>
						</view>
					</view>
					<view
						style="width: 100%; height: 100rpx; float: left; display: flex; justify-content: space-around; margin-top: 20rpx;">
						<view style="width: 25%; height: 100rpx;"
							@click="chuhia('/pages/index/index?src=https%3A%2F%2Flhqf.szlh.org.cn%2Fmobile%2Fpages%2Ffinancing%2Fproduct')">
							<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
								<image src="/static/detail/编组 93备份 5@2x@1x.png" style="width: 100%; height: 100%;">
								</image>
							</view>

							<view class="custom-font" style="width: 100%; text-align: center;">获融资</view>
						</view>
						<view style="width: 25%; height: 100rpx;"
							@click="chuhia('/pages/index/index?src=https%3A%2F%2Flhqf.szlh.org.cn%2Fmobile%2Fpages%2Findex%2FqyfcList')">
							<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
								<image src="/static/detail/风采展播@2x@1x.png" style="width: 100%; height: 100%;"></image>
							</view>

							<view class="custom-font" style="width: 100%; text-align: center;">风采展播</view>
						</view>
						<view style="width: 25%; height: 100rpx;"
							@click="chuhia('/pages/index/index?src=https%3A%2F%2Flhqf.szlh.org.cn%2Fmobile%2Fpages%2Fnews%2Findex%3Fname%3D%25E6%2594%25BF%25E5%25BA%259C%25E9%2587%2587%25E8%25B4%25AD%26isIndex%3D1')">
							<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
								<image src="/static/detail/政府采购@2x@1x.png" style="width: 100%; height: 100%;"></image>
							</view>

							<view class="custom-font" style="width: 100%; text-align: center;">政府采购</view>
						</view>
						<view style="width: 25%; height: 100rpx;"
							@click="chuhia('/pages/index/index?src=https%3A%2F%2Flhqf.szlh.org.cn%2Fmobile%2Fpages%2FbusinessArea%2Flist')">
							<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
								<image src="/static/detail/咨询文章@1x.png" style="width: 100%; height: 100%;"></image>
							</view>

							<view class="custom-font" style="width: 100%; text-align: center;">虚拟园区</view>
						</view>
					</view>
				</view>

			</view>
			<view class="zupingxixi" style="padding-bottom: 20rpx;" v-if="currentIndexs == 3">
				<view style="width: 100%; float: left; position: relative;">
					<view style="margin-top: 20rpx; margin-left: 5%; width: 100%;">
						<view>
							<text style="color: #0766D9;">相关</text>
							<text>政策</text>
						</view>
					</view>
					<view
						style="width:90%; margin-top: 10px; margin-left: 5%; font-size: 28rpx; color: #5E5E5E; line-height: 1.6rem;">
						<view style="text-indent: 2em;">
							一、为企业提供“创业空间—孵化器—加速器—创产用房—主题楼宇（园区）—产业用地”全生命周期的办公空间支持。
						</view>
						<view style="text-indent: 2em;">1.创业空间。认定为青年创新创业人才及团队的，可申请最高 30个办公卡位或“一间办公室”，给予最高三年免租。</view>
						<view style="text-indent: 2em;">2.孵化器。对符合条件的初创型企业，入驻孵化器的，可申请最高300平方米的“多间办公室”，给予最高三年免租。</view>
						<view style="text-indent: 2em;">3.加速器。对符合条件的成长型企业，入驻加速器的，可申请最高2000平方米的“一层办公楼”的空间支持，第一年免租，第二、第三年最高享受租金三折优惠
						</view>
						<view style="text-indent: 2em;">二、在罗湖区购置自用办公用房500平方米以上且符合条件的企业，可按购置金额一定比例给予商办去化支持，分年发放。</view>
					</view>
				</view>

			</view>
			<view style="width: 100%; height: 200rpx;"></view>
		</scroll-view>
		<view class="dibutab">
			<view>
				<!-- <image src="/static/detail/xx.png" style="width: 46rpx; height: 44rpx;"></image>
				<view style="margin-top: -5rpx;">收藏</view> -->
			</view>
			<view @click="chafangyuan('center')">
				<image src="/static/detail/fz.png" style="width: 46rpx; height: 44rpx;"></image>
				<view class="custom-font" style="margin-top: -5rpx;">查房源</view>
			</view>
			<view class="lianxiwomeng" @click="toggle('bottom')">
				<image src="/static/detail/dh.png" class="dianhua"></image>
				<view class="lxwm_vtb">联系我们</view>
			</view>
			<view class="xuqiudengji"  @click="chuhia('/pages/index/index?src=https://lhqf.szlh.org.cn/mobile/pages/industryspace/yxdjFrom?arrId=' +detaili.buildId+ '&arrName='+detaili.buildName)">需求登记</view>
		</view>
		<uni-popup ref="popup" :mask-click="false">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="header_li">
				</view>
			</view>
			<view class="header_li">
				<view style="width: 100%; height: 220rpx; background: #fff;">

					<view style="width: 100%; text-align: center; line-height: 100rpx; color: #aaa;">
					罗湖区企业服务热线: <text style="color: #0766D9;">0755-82229120</text>
					</view>
					<view style="width: 100%; text-align: center; line-height: 100rpx;color: #aaa">
					物业联系方式: <text style="color: #0766D9;">{{ detaili.concatPhone }}</text>
					</view>
				</view>
				<view style="width: 100%; height: 100rpx; background: #fff;" @click="onegb()">


					<view style="width: 100%; text-align: center; line-height: 100rpx;">取消</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupc">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view
					style="width: 600rpx; background: #fff; max-height: 60vh;overflow-y: auto; border-radius: 20rpx;padding-bottom:30rpx;">
					<view style="margin-left: 5%; width: 90%; float: left;">
						<view style="margin-top: 20rpx;">
							<text style="color: #0766D9;">房源</text>
							<text>信息</text>
							<text style="float: right; font-size: 24rpx;">空置面积: <text
									style="color: #1684FC; font-size: 26rpx; margin-left: 10rpx;">{{ detaili.vacancyArea }}</text>
								m²</text>
						</view>
						<view class="list-container" style="margin-top: 20rpx;">
							<view class="list-item">
								<view>户型区间</view>
								<view>是否空置</view>
								<view>租售类型</view>
							</view>
							<view class="list-item" v-for="(item, index) in detaili.rooms"
								style="text-align: center; font-size: 24rpx;">
								<view style="width: 33%;">{{ item.areaScope }}</view>
								<view style="width: 33%;" v-if="item.flagVacant == true">是</view>
								<view style="width: 33%;" v-else>否</view>
								<view style="width: 33%;" v-if="detaili.rentType == 1">仅出租</view>
								<view style="width: 33%;" v-else-if="detaili.rentType == 2">仅出售</view>
								<view style="width: 33%;" v-else-if="detaili.rentType == 3">出租和出售</view>
								<view style="width: 33%;" v-else-if="detaili.rentType == 4">优先出租</view>
								<view style="width: 33%;" v-else-if="detaili.rentType == 5">优先出售</view>
								<view style="width: 33%;" v-else>--</view>
							</view>

						</view>
					</view>
				</view>
			</view>

		</uni-popup>
	</view>

</template>

<script>
import {
	gotoAutonaive
} from '@/utils/index'
import DefaultImg from '@/static/default.png'
export default {
	data() {
		return {
			indicatorDots: false,
			showWebView: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			currentIndex: 0,
			currentIndexs: 0, // 当前选中的tab索引
			tabs: [ // 定义你的tab项
				{
					name: '基础信息'
				},
				{
					name: '租赁信息'
				},
				{
					name: '特色园区'
				},
				{
					name: '综合服务'
				},
			],
			detaili: "",
			buildImg: "",
			// quanjingimg:'https://www.720yun.com/vr/be9jt0snzv6',
			type: null,
			fenlist: "",
			industryTagfl: "",
			dasha: "",
		}
	},
	onLoad(options) {

		this.streetlistdetai(options.id)
	},
	methods: {
		tiaozhuangaode(e) {
			const latitude = this.detaili.latitude; // 纬度
			const longitude = this.detaili.longitude; // 经度
			const buildName = this.detaili.buildName;
			// console.log(longitude,latitude)
			//      window.open(`https://uri.amap.com/marker?position=${latitude},${longitude}&name=${e}&callnative=1`); // 构造高德地图导航URL
			gotoAutonaive(longitude, latitude, buildName, e)

		},
		chafangyuan(type) {
			this.type = type
			// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
			this.$refs.popupc.open(type)
		},
		tishikuang() {
			uni.showToast({
				title: '功能正在开发中...',
				icon: 'none',
				duration: 2000
			});
		},
		headcompany(e) {
			var data = {
				buildName: e
			}
			this.$rqt.headcompany(data).then(res => {
				console.log(res.data)
				this.dasha = res.data
			})
		},
		streetlistdetai(e) {


			this.$rqt.streetlistdetai(e).then(res => {
				console.log(res.data)
				this.detaili = res.data
				this.headcompany(res.data.buildName)

				this.fenlist = this.detaili.buildTag?.split(',');
				this.industryTagfl = this.detaili.industryTag?.split(',');

				if (!this.detaili.buildImg) {
					this.buildImg = [DefaultImg]
				} else {
					this.buildImg = this.detaili.buildImg.split(',')
				}

				if (!this.detaili.panoramaFile && !this.detaili.buildVideo) {
					this.currentIndex = 1
				}
			})
		},
		onegb() {
			this.$refs.popup.close()

		},
		toggle(type) {
			this.type = type
			// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
			this.$refs.popup.open(type)
		},
		fanhui() {
			this.showWebView = false
			this.$nextTick(() => {
				window.history.go(-1)
				// uni.navigateBack()
			})
		},
		btnli(e) {
			this.currentIndex = e
		},
		selectTab(index) {
			this.currentIndexs = index;
			// 这里可以添加跳转逻辑，例如使用uni.navigateTo(this.tabs[index].path);
		},
		chuhia(e) {
			wx.miniProgram.navigateTo({
				url: e,
			});
		}

	}
}
</script>

<style>
page {
	background: #f3f4f9;
}

.detail {
	width: 100%;
	height: 421rpx;

	position: relative;
}

.detail_header {
	/* width: 100%;
		height: 421rpx; */
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
}

.tabquanjing {
	display: flex;
	align-items: center;
	width: 350rpx;
	height: 45rpx;
	border-radius: 30px;
	padding: 5rpx 5rpx;
	/* opacity: 1; */
	/* float: left; */
	overflow: hidden;
	background: rgba(0, 0, 0, 0.5);
	box-sizing: border-box;
	border: 1px solid rgb(255 255 255 / 30%);
	box-shadow: 0 0 8px rgba(0 0 8px rgb(0 0 0 / 30%));
}

.tablist {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 6rpx;
	height: 100%;
	/* width: 125rpx; */
	/* height: 39rpx; */
	border-radius: 30rpx;
	opacity: 1;
	font-size: 20rpx;
	/* margin-top: 3rpx; */
	text-align: center;
	/* line-height: 39rpx; */
	/* float: left; */
	color: #fff;
	overflow: hidden;
}

.tablist.active {
	/* float: left; */
	width: 125rpx;
	/* height: 39rpx; */
	border-radius: 30rpx;
	opacity: 1;
	font-size: 20rpx;
	/* margin-top: 3rpx; */
	text-align: center;
	/* line-height: 39rpx; */
	background: rgba(255, 255, 255, 0.9);
	color: #434343;
}

.tabye {
	width: 92rpx;
	height: 45rpx;
	border-radius: 30px;
	opacity: 1;
	float: right;
	background: rgba(0, 0, 0, 0.5);
	text-align: center;
	line-height: 45rpx;
	color: #fff;
	font-size: 20rpx;
}

.tubiao {
	width: 25rpx;
	height: 25rpx;
	/* margin-top: 5rpx; */
	/* margin-left: 20rpx; */
	/* float: left; */
}

.img_tab_xinxi {
	width: 95%;
	/* height: 421rpx; */
	background: #fff;
	box-shadow: 0px 2px 11px 0px rgba(199, 210, 228, 0.5);
	float: left;
	border-radius: 20rpx;
	/* margin-top: -10rpx; */
	margin-left: 2.5%;
	padding-bottom: 12px;
}

.yunqititle {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 15rpx;
	/* height: 55rpx; */
	flex-wrap: wrap;
	margin-top: 12px;
	overflow: hidden;
}

.bjs {
	display: flex;
	align-items: center;
	white-space: nowrap;
	height: 40rpx;
	border-radius: 10px;
	background: #FBF2E9;
	padding: 0 12rpx;
	box-sizing: border-box;
}

.bt_bjs {
	/* min-width: 100rpx; */
	/* max-width: 350rpx; */
	overflow: hidden;
	text-overflow: ellipsis;
	color: #A16B33;
	float: left;
	margin-left: 10rpx;
	line-height: 40rpx;
	font-size: 20rpx;
}

.detail-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10rpx;
}

.beijinweizi {
	width: 160rpx;
	height: 36rpx;
	border-radius: 4rpx;
	opacity: 1;
	border-radius: 5px;
	background: #F1F4F7;
	text-align: center;
	line-height: 36rpx;
	color: #5C6272;
	font-size: 20rpx;
}

.mianjibj {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6rpx;
	/* overflow: hidden; */
	/* float: left; */
	/* text-align: center; */
}

.mjxx {
	color: red;
	font-size: 28rpx;
}

.pr-name-bubble {
	width: 200rpx;
}

.csjg {
	color: #959AA4;
	font-size: 20rpx;
	/* margin-top: 6rpx; */
}

.guiyuanxinxi {
	display: flex;
	/* justify-content: space-around; */
	/* width: 669rpx; */
	height: 103rpx;
	border-radius: 6px 30px 6px 30px;
	background: linear-gradient(99deg, rgba(71, 157, 247, 0.06) 1%, rgba(60, 98, 249, 0.05) 58%, rgba(237, 115, 242, 0.05) 112%);
}

.dibutab {
	width: 100%;
	height: 120rpx;
	background: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 99;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	text-align: center;
}

.lianxiwomeng {
	width: 238rpx;
	height: 88rpx;
	border: 1rpx solid #0766D9;
	color: #0766D9;
	border-radius: 25rpx;
	text-align: center;
	line-height: 88rpx;
}

.xuqiudengji {
	width: 238rpx;
	height: 88rpx;
	background: #0766D9;
	color: #fff;
	border-radius: 25rpx;
	text-align: center;
	line-height: 88rpx;
}

.dianhua {
	width: 33rpx;
	height: 33rpx;
	float: left;
	margin-left: 40rpx;
	margin-top: 28rpx;
}

.lxwm_vtb {
	float: left;
	margin-left: 5rpx;
}

.jichuxinxi {
	width: 95%;
	/* height: 120rpx; */
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
	float: left;
	margin-left: 2.5%;
	margin-top: 20rpx;
}

.jichuxinxis {
	width: 95%;

	background: #fff;
	border-radius: 0 0 20rpx 20rpx;
	float: left;
	margin-left: 2.5%;
	/* margin-top: 20rpx; */
}

.tab_kust_name {
	display: flex;
	align-items: center;
	width: 711rpx;
	height: 88rpx;
	/* border-radius: 10px 25px 10px 40px; */
	/* opacity: 1; */
	background: linear-gradient(98deg, rgba(71, 157, 247, 0) 0%, rgba(60, 98, 249, 0.05) 60%, rgba(237, 115, 242, 0.05) 116%);
}

.tab-bar {
	display: flex;
	width: 100%;
	justify-content: space-around;
	align-items: center;
	height: 20px;
	/* 根据需要调整 */
}

.tab-item {
	position: relative;
	width: 25%;
	text-align: center;
	font-size: 14px;
	/* 根据需要调整 */
	color: #333;
	/* 未选中颜色 */
	/* margin-top: 20px; */
}

.tab-item.active {
	color: #007AFF;
	/* 选中颜色 */
}

.tab-item image {
	position: absolute;
	left: 50%;
	bottom: -30%;
	transform: translateX(-50%);
}

.underline {
	height: 2px;
	/* 下划线高度 */

}

.xiangqing {
	padding: 20rpx 30rpx;
	/* width: 95%; */
	/* height: 410rpx; */
	/* margin-left: 5%; */
	/* margin-top: 20rpx; */
	border-bottom: 1rpx dashed #ccc;
}

.tubiap_img_tler {
	width: 31rpx;
	height: 26rpx;
	float: left;
}

.jzmjk {
	float: left;
	color: #777777;
	font-size: 28rpx;
}

.mjxx_b {
	font-size: 28rpx;
	float: left;
	margin-left: 10rpx;
}

.zupingxixi {
	width: 95%;
	/* height: 700rpx; */
	background: #fff;
	border-radius: 20rpx;
	float: left;
	margin-left: 2.5%;
	margin-top: 20rpx;
}

.custom-font {
	font-size: 28rpx;
}

.list-container {
	/* 可以添加一些基本的样式，比如宽度等 */
}

.list-item:nth-child(odd) {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	height: 35rpx;
	background-color: #f0f0f0;
	/* 灰色背景 */
}

.list-item {
	padding: 16rpx 0;
}

.list-item:nth-child(even) {
	display: flex;
	height: 35rpx;
	justify-content: space-around;
	flex-direction: row;
	background-color: #ffffff;
	/* 白色背景 */
}

.lyxx {
	background: #fff;
	border-radius: 10rpx;
	padding: 5rpx 10rpx;
	margin-top: 20rpx;
	margin-left: 20rpx;
	text-align: center;
}

.uni-margin-wrap {
	width: 690rpx;
	width: 100%;
}

.swiper {
	height: 300rpx;
}

.swiper-item {
	display: block;
	height: 300rpx;
	line-height: 300rpx;
	text-align: center;
}

.swiper-list {
	margin-top: 40rpx;
	margin-bottom: 0;
}

.uni-common-mt {
	margin-top: 60rpx;
	position: relative;
}

.info {
	position: absolute;
	right: 20rpx;
}

.uni-padding-wrap {
	width: 550rpx;
	padding: 0 100rpx;
}
</style>